import React from 'react'
import { Button, Tag } from 'antd'
import Input from './SkillInput'
import UpLoad from '@/components/upload/UpLoad'
import { connect } from 'umi'


type Props = {
    index: number,
    dispatch: any
}

function SkillCard({ index, dispatch }: Props) {
    return (
        <div className='banner_box'>
            <div className='banner_card'>
                <Tag className='p3' color="blue">技能{index + 1}</Tag>
                <Input prop="skills" index={index} title="技能名称" type="name"/>
                <div className='banner_flex mt15'>
                    <span className='left_text mr15'>
                        技能图标
                    </span>
                    <UpLoad url="/api/upload/skill" type="hero/setProps" index={index} skills="skills" prop="icon"/>
                </div>
                <Input prop="skills" index={index} title="冷却值" type="delay"/>
                <Input prop="skills" index={index} title="消耗" type="cost"/>
                <Input prop="skills" iptType="textArea" index={index} title="技能描述" type="desc"/>
                <Input prop="skills" iptType="textArea" index={index} title="小提示" type="tips"/>
            </div>
            <Button className='mt15' type="primary" danger onClick={() => {
                dispatch({ type: "hero/delSkins", index, action: "skills" })
            }}>删除技能</Button>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(SkillCard)